<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-image: url('./个人简历背景.jpeg');
}
 
.container {
    background-color: #fff;
    padding: 50px;
    border-radius: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
 
.tooltip {
    display: none;
    position: absolute;
    margin-top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    background-color: #ffcccc;
    border: 1px solid #ff6666;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
    </style>
</head>
<body>
    <div class="container">
        <h1>登录界面</h1>
        <form id="myForm">
            <label for="requiredInput">请输入密码:</label>
            <input type="password" id="requiredInput"  placeholder="该填写的内容">
            <div id="tooltip" class="tooltip">请输入至少8个字符</div>
            <br><br>
            <label for="checkboxInput">记住密码:</label>
            <input type="checkbox" id="checkboxInput" name="checkboxInput">
            <br><br>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </form>
    </div>
    
    <script>
        alert('欢迎登录');
        prompt('请输入口令','例如1328');
     document.addEventListener('DOMContentLoaded', (event) => {
    const textInput = document.getElementById('requiredInput');
    const tooltip = document.getElementById('tooltip');

    requiredInput.addEventListener('input', () => {
        if (requiredInput.value.length < 8) {
            tooltip.style.display='block';
        } else {
            tooltip.style.display = 'none';
        }
    });

        document.getElementById('myForm').addEventListener('submit', (event) => {
        event.preventDefault();
        if (requiredInput.value.length < 8) {
            alert('请输入至少8个字符才能提交表单');
        } else {
            alert('表单已提交');
            
        }
    });
});
    
    </script>
</body>
</html>